import type { VbenFormProps, VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { queryPage } from './api';
import { ref, computed } from 'vue';

// 操作id
export const idKey = ref('htmlId');
export const handleId = ref('');
export const htmlGroup = ref('1');

// 表格表单数据
export const formOptions: VbenFormProps = {
  schema: [
    {
      component: 'Input',
      defaultValue: '',
      fieldName: 'htmlTitle',
      label: '协议标题',
    },
  ],
  wrapperClass: 'grid-cols-5',
};

// 表格数据
export const gridOptions: VxeTableGridOptions = {
  columns: [
    { title: '序号', type: 'seq', width: 80 },
    { title: '协议标题', field: 'htmlTitle', align: 'left' },
    { title: '排序', field: 'sortOrder', align: 'center', width: 100 },
    { title: '创建时间', field: 'createTime', align: 'left', width: 200 },
    { slots: { default: 'action' }, title: '操作', width: 160 },
  ],
  minHeight: '100%',
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        return await queryPage({
          page: page.currentPage,
          limit: page.pageSize,
          htmlGroup: htmlGroup.value,
          ...formValues,
        });
      },
    },
    response: {
      result: 'data.records',
      total: 'data.total',
      list: 'data.records',
    },
  },
  pagerConfig: {
    enabled: true,
    pageSize: 20,
  },
  toolbarConfig: {
    custom: true,
    export: false,
    import: false,
    refresh: true,
    zoom: true,
  },
};

// 编辑弹窗表单配置
export const drawerFormSchema: VbenFormSchema[] = [
  {
    component: 'Input',
    defaultValue: '',
    fieldName: idKey.value,
    label: '服务规则id',
    dependencies: {
      show() {
        return false;
      },
      triggerFields: [''],
    },
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入协议标题',
      allowClear: true,
      class: 'w-1/4',
    },
    fieldName: 'htmlTitle',
    label: '协议标题',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入协议代码',
      allowClear: true,
      class: 'w-1/4',
    },
    fieldName: 'htmlCode',
    label: '协议代码',
    rules: 'required',
  },
  {
    component: 'InputNumber',
    fieldName: 'sortOrder',
    componentProps: {
      class: 'w-1/4',
    },
    label: '排序值',
    rules: 'required',
    defaultValue: 99,
  },
  {
    component: 'TinymceEditor',
    fieldName: 'htmlContent',
    label: '内容',
    rules: 'required',
  },
];
